<template>
  <div class="rbox">
    <div class="ball" ref="ballRef">
       <div v-show="false"> {{ point.x}},{{ point.y }}</div>
    </div>
  </div>
</template>

<script lang='ts' setup>
import {onUpdated,ref} from 'vue'
import usePoint from '@/hooks/usePoint'
const point=usePoint()
const ballRef=ref<HTMLElement>()
onUpdated(()=>{
    console.log(point.x+"px");
    
    (ballRef.value as HTMLElement).style.left=point.x-(ballRef.value as HTMLElement).offsetWidth/2+"px";
    (ballRef.value as HTMLElement).style.top=point.y+"px";
})

</script>

<style lang='scss' scoped>
.rbox{
    flex-grow: 1;
    height: 100vh;
    background-color:yellowgreen;
    .ball{
        cursor: pointer;
        position:absolute;
        left: 50px;
        top: 50px;
        width: 50px;
        height: 50px;
        background: linear-gradient(red,orange);
        border-radius: 50%;
    }
}
</style>